
<template>
    <div style="margin-left: -50px;">
       <h1 style="text-align: center;">华莱士冷饮系列</h1>
       <el-card style="width:100%;margin-left: 20px">
           <template #header>
            <div  style="color: red;"class="card-header">
                <div class="food" v-for="a in tableData">
                <el-image style="width: 200px; height: 130px" :src="a.image" />
                   <p>
                    <li style="color: black;">编号：{{a.id}}</li>
                    <li style="margin-left: 60px;">$ {{a.price}}</li>
                   </p> 
                   <p>
                    <li style="height: 20px;color: black;font-size: 10px;margin-top: 10px;" >{{a.production_date}}</li>
                    <el-button style="margin-left: 40px;" type = "warning" plain @click="view(a.id)"><el-icon><Burger /></el-icon>.查看详情</el-button>
                    <el-dialog v-model="dialogVisible" title="kfc冷饮信息" width="800" height="800" align-center>
                        <el-card>
                            <el-from>
                                <el-form-item label = "商品编号">
                                    <el-input width ="100" v-model="food.id" placeholder="id" />
                                </el-form-item>
                                <el-form-item label = "商品图片">
                                    <el-input width ="100" v-model="food.image" placeholder="image" />
                                </el-form-item>
                                <el-form-item label = "商品价格:">
                                    <el-input width ="100" v-model="food.price" placeholder="price" />
                                </el-form-item>
                                <el-form-item label = "日期:">
                                    <el-input width ="100" v-model="food.production_date" placeholder="production_date" />
                                </el-form-item>
                            </el-from>
                            <div class = "dialog-footer">
                                <el-button  @click = "doAdd" style="margin-left: 600px;" type="success" plain><el-icon><Plus /></el-icon>添加购物车</el-button>
                            </div >     
                        </el-card>
                    </el-dialog>
                   </p>
                </div>
            </div>
           </template>
           <div>
               
           </div>
           <template #footer>
           </template>
       </el-card> 
   </div>
    <RouterView />
   </template>
   
   <style scoped>
   .card-header{
       display: flex;
       flex-direction: row;
       flex-wrap: wrap; /*超过父元素自动换行*/
       
   }
   .food{
       margin-top: 50px;
       margin-left: 90px;
   }
   .food p{
       display: flex;
       flex-direction: row;
   }
   .food p li{
       list-style-type: none;
   }
   </style>
   
   
   <script setup>
   // 展示全部数据
   import {Plus,Burger,} from "@element-plus/icons-vue"
   import { ElMessage } from 'element-plus'
   import { ref,onMounted} from "vue";
   const tableData =ref([])
   const query = ()=>{
       fetch("http://localhost:3000/types/2?_embed=kfcs",{
           method:'get'
       }).then(response=>response.json()).then((data)=>{
           tableData.value = data.kfcs
   
       })
   }
   onMounted(()=>{
       query()
   })

const dialogVisible = ref(false)
const food = ref({
    id:"",
    image:"",
    production_date:"",
    price:null
})
//查看数据
const view=(id)=>{
    dialogVisible.value = true
    fetch("http://localhost:3000/kfcs/"+id,{
                    method:"get"
                }).then(response=>response.json()).then((data)=>{
                    food.value = data

                })
}
//添加数据
const doAdd=()=>{
    fetch("http://localhost:3000/shopcar",{
        method:'post',
        body:JSON.stringify(food.value)
    }).then(response=>response.json()).then((data)=>{
        ElMessage.success("添加成功")
        dialogVisible.value = false
    })
}
   </script>
   
   